<template>
  <el-dialog
      title="编辑作品"
      :visible.sync="dialogFlag"
      class="show"
      width="1100px"
      @close="dialogFlag = false"
  >
    <div class="edit-pro">
      <!--    <div fz-16 center>编辑作品</div>-->
      <!-- <div ww3 auto>
        <el-page-header @back="goBack" content="编辑作品">
        </el-page-header>
      </div> -->

      <div class="edit-form" flex auto flex-b>

        <div class="edit-img">
          <div @click="changeFile('filesImg1')">
            <img style="width: 100%" :src="$url.fileUrl + form.filesImg1" alt="">
          </div>
          <div>

          </div>
        </div>

        <div class="edit-cont">

          <p fz-14 class="pro-bar">
            <span>编号：{{ info.userId }}</span>
            <span>日期：{{ info.createTime }}</span>
            <span>时长：{{ formatSencond(info.fileSometimes / 1000) }}</span>
          </p>

          <el-form :model="form"
                   :rules="rules"
                   ref="ruleForm"
                   label-width="100px"
                   class="demo-ruleForm"
                   label-position="top"
          >
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <div>
              <el-input type="textarea" v-model="form.introduce" placeholder="请输入简介"></el-input>
            </div>

            <el-form-item prop="antistop">
              <p fz-14>
                <i style="color: #F56C6C;">*</i> 更多用户通过关键词找素材：
                <span cur style="color: #0c8be3">关键词填写技巧</span>
              </p>
              <el-input type="textarea" v-model="form.antistop"></el-input>
              推荐关键词
            </el-form-item>


            <el-form-item prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox
                    checked
                    label="保证原创"
                    name="type"
                    style="font-size: 16px">
                </el-checkbox>
              </el-checkbox-group>
              <span fz-12 style="color: #a2a2a2">
                必须，勾选即代表该作品版权归属账号认证人，否则欺诈行为带来的法律责任自行承担。
              </span>
              <el-form-item prop="portraitAuthorization">
                <el-checkbox-group v-model="form.portraitAuthorization">
                  <el-checkbox label="1">有肖像权授权</el-checkbox>
                  <el-checkbox label="2">有物权授权</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <p fz-12 style="color: #a2a2a2">
                非必选，勾选即代表该作品以获取相关授权，且带授权销售 通过审核后无法删除
              </p>

            </el-form-item>

            <el-form-item class="submit-btn">
              <p class="tip" flex flex-c>
                准确的信息描述将避免引起投诉，
                素材<i b-1>10</i>天内未通过审核，将被自动删除
              </p>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

            </el-form-item>
          </el-form>


        </div>

        <div class="edit-price">
          <el-form
              ref="form"
              :model="form"
              label-width="80px"
              size="mini"
              label-position="top"
          >
            <el-form-item prop="aisleAuthorization">
              <el-checkbox-group v-model="form.aisleAuthorization">
                <el-checkbox label="1">alpha透明通道</el-checkbox>
                <el-checkbox label="2">无限循环</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item v-if="info.type == 2">
              <div class="fbl-wrapper">
                <div class="sel-option" @click="pxSelectVisible = !pxSelectVisible">
                  <!-- <span>分辨率：</span> -->
                  <span>{{ form.resolutionRatio }}</span>
                  <i class="el-icon-arrow-down" style="margin-left: 10px;"></i>
                </div>
                <div class="sel-wrapper" v-show="pxSelectVisible">
                  <div v-for="x in pxParam.list" @click="changeSelectType('resolutionRatio', x.v)" :key="x.v">{{ x.k }}</div>
                  <div>
                    <div>
                      自定义分辨率
                    </div>
                    <div>
                      <el-input type="number" v-model="pxParam.width" placeholder="宽"></el-input>
                      <span> x </span>
                      <el-input type="number" v-model="pxParam.height" placeholder="高"></el-input>
                    </div>
                    <div>
                      <el-button type="success" @click="surePxSelect">提交</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>


            <el-form-item v-if="info.type == 2">
              <div class="zl-wrapper">
                <div class="sel-option" @click="zSelectVisible = !zSelectVisible">
                  <span>{{form.frameRate}}</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <div v-show="zSelectVisible" class="sel-wrapper">
                  <div v-for="x in zParam.list" @click="changeSelectType('frameRate', x.v)" :key="x.k">{{x.k}}</div>
                  <div>
                    <div>
                      自定义帧率
                    </div>
                    <div>
                      <div>
                        <el-input v-model="zParam.v" placeholder="自定义帧率"></el-input>
                      </div>
                      <div>
                        <el-button type="success" @click="sureZParam">提交</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="" v-if="info.type == 2" prop="name" class="pirce-input">
              <el-select style="width: 100%" v-model="form.videoType" placeholder="请选择" @change="changeCate($event)">
                <el-option v-for="x in fileTypeList" :key="x.dictId" :label="x.categoryName" :value="x.dictId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="" v-if="info.type == 2" prop="name" class="pirce-input">
              <el-select style="width: 100%" v-model="form.documentType" placeholder="请选择" @change="changesCate($event)">
                <el-option v-for="x in sfileTypeList" :key="x.dictId" :label="x.categoryName" :value="x.dictId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="" v-if="info.type == 2" prop="name" class="pirce-input">
              <el-select
                  style="width: 100%"
                  v-if="sfileTypeParam.ancestors == 2"
                  v-model="form.editable" placeholder="请选择">
                <el-option v-for="x in subfileTypeList" :key="x.categoryName" :label="x.categoryName" :value="x.categoryName"></el-option>
              </el-select>
              <el-input
                  style="width: 100%"
                  v-else
                  v-model="form.editable"
                  placeholder="请输入文件数量"
                  type="number"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="" prop="individualPrice" style="font-size: 0" class="pirce-input">
              <el-input
                  v-model="form.individualPrice"
                  type="number"
                  placeholder="请输入价格"
              >
              </el-input>
              <el-select v-model="form.priceUnit" placeholder="请选择">
                <el-option label="元" :value="1"></el-option>
<!--                <el-option label="V币" :value="2"></el-option>-->
              </el-select>
            </el-form-item>

            <div style="color: #606266;" v-show="form.priceUnit == 1 && !isNaN(form.individualPrice) && !!form.individualPrice" fz-14 class="auto-tip">
              <p>企业授权价：{{ isNaN(form.individualPrice) ? '-' : parseFloat(form.individualPrice) * 2 + '~' + parseFloat(form.individualPrice) * 4 }}</p>
              <p>企业PLUS授权价：{{ isNaN(form.individualPrice) ? '-' : parseFloat(form.individualPrice) * 4 + '~' + parseFloat(form.individualPrice) * 10 }}</p>
            </div>

            <div style="color: #adadad;">
              为了给您争取更多收益，企业及企业PLUS授权价格由个人授权的2倍、4倍提升为2~4倍、4~10倍，Bzuo网将尽量以最高倍数进行销售
            </div>


          </el-form>
        </div>

      </div>

      <input type="file" ref="uploadFile" style="display: none" @change="uploadFile">
    </div>
  </el-dialog>

</template>

<script>
import homeHttp from "@/api/home/home"
import videoHttp from "@/api/info/videoUpload"

export default {
  name: "EditPro",
  data() {
    return {
      id: '',
      fileTypeList: [],
      sfileTypeList: [],
      subfileTypeList: [],
      sfileTypeParam: {},
      pxSelectVisible: false,
      zSelectVisible: false,
      list: [],
      pxParam: {
        list: [
          {k: '1920x1080', v: '1920x1080'},
          {k: '1280x720', v: '1280x720'},
          {k: '2048x1080', v: '2048x1080'},
          {k: '1096x2160', v: '1096x2160'},
        ],
        custom: false,
        width: '',
        height: ''
      },
      zParam: {
        list: [
          {k: '23.97', v: '23.97'},
          {k: '24', v: '24'},
          {k: '25', v: '25'},
          {k: '29.97', v: '29.97'},
          {k: '30', v: '30'},
          {k: '50', v: '50'},
          {k: '60', v: '60'},
          {k: '120', v: '120'},
        ],
        custom: false,
        v: '',
      },
      dialogFlag: false,
      form: {
        "videoId": '',
        "title": "",
        "introduce": "",
        "antistop": "",
        cmsFiles: [],
        resolutionRatio: '1920x1080',
        frameRate: '23.97',
        categoryIds: '',
        fileType: '',
        fileNumber: '',
        fileAccredit: '',
        videoType: '',
        videoTypeName: '',
        documentType: '',
        documentTypeName: '',
        editable: '',
        "portraitAuthorization": [],
        "aisleAuthorization": [],
        "priceUnit":1,
        "individualPrice": '',
        "enterprisePrice": '',
        "enterprisePlusPrice": '',
        "filesImg1": "",
        "fileListUrl": [
          {
            "filePath": ""
          }
        ]
      },
      uploadParam: {
        type: '',
        index: ''
      },
      info: {},
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        num: "",
      },
      rules: {
        // name: [
        //   {required: true, message: '请输入活动名称', trigger: 'blur'},
        //   {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        // ],
        // region: [
        //   {required: true, message: '请选择活动区域', trigger: 'change'}
        // ],
        // date1: [
        //   {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        // ],
        // date2: [
        //   {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        // ],
        // type: [
        //   {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        // ],
        // word: [
        //   {required: true, message: '请填写素材关键词', trigger: 'blur'}
        // ],
        // desc: [
        //   {trigger: 'blur'}
        // ]
      }
    };
  },

  methods: {
    surePxSelect() {
      if(!this.pxParam.width) {
        return this.$message.error('请输入自定义分辨率宽度')
      }
      if(!this.pxParam.height) {
        return this.$message.error('请输入自定义分辨率高度')
      }
      if(!/(^[1-9]\d*$)/.test(this.pxParam.width)) {
        return this.$message.error('自定义分辨率宽度输入有误')
      }
      if(!/(^[1-9]\d*$)/.test(this.pxParam.height)) {
        return this.$message.error('自定义分辨率高度输入有误')
      }

      this.form.resolutionRatio = this.pxParam.width + 'x' + this.pxParam.height
      this.pxSelectVisible = false
    },

    sureZParam() {
      if(!this.zParam.v) {
        return this.$message.error('请输入自定义帧率')
      }

      this.form.frameRate = this.zParam.v
      this.zSelectVisible = false
    },

    uploadFile() {
      const file = this.$refs.uploadFile.files[0]

      videoHttp.uploadFile({
        file: file
      }).then(res => {
        const uploadParam = this.uploadParam
        if(uploadParam.type === 'cmsFiles') {
          this.form[uploadParam.type][uploadParam.index].filePath = res.fileName
        }else{
          this.form[uploadParam.type] = res.fileName
        }

        this.$refs.uploadFile.value = ''
      })
    },

    changeFile(type, index) {
      this.uploadParam.type = type
      this.uploadParam.index = index || ''
      this.$refs.uploadFile.click()
    },

    formatSencond(value) {
      let result = parseInt(value)
      let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
      let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
      let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));

      let res = '';
      res += `${m}:`
      res += `${s}`;
      return res;
    },

    submitForm() {
      if(!this.form.title) {
        return this.$message.error('请输入标题')
      }
      if(!this.form.introduce) {
        return this.$message.error('请输入简介')
      }
      if(!this.form.antistop) {
        return this.$message.error('请输入关键词')
      }
      if(!this.form.individualPrice) {
        return this.$message.error('请输入价格')
      }
      if(!this.form.priceUnit) {
        return this.$message.error('请选择价格类型')
      }
      if(this.info.type == 2) {
        if(!this.form.videoType) {
          return this.$message.error('请选择软件信息')
        }
        if(!this.form.documentType) {
          return this.$message.error('请选择软件版本')
        }

        if(this.sfileTypeParam.ancestors == 2) {
          if(!this.form.editable) {
            return this.$message.error('请选择')
          }
        }else{
          if(!this.form.editable) {
            return this.$message.error('请输入文件数量')
          }
        }

      }

      if(this.ruleForm.type.length === 0) {
        return this.$message.error('非原创作品无法提交')
      }

      const t = JSON.parse(JSON.stringify(this.form))

      t.portraitAuthorization = t.portraitAuthorization.join(',')
      t.aisleAuthorization = t.aisleAuthorization.join(',')

      t.enterprisePrice = parseFloat(t.individualPrice) * 4
      t.enterprisePlusPrice = parseFloat(t.individualPrice) * 10
      t.fileListUrl = t.cmsFiles
      homeHttp.videoEdit(t).then(res => {
        this.$message.success('操作成功')
        this.$emit('sure')
        this.dialogFlag = false
      })
    },
    changeCate(id, isinit) {
      const t = this.fileTypeList.find(res => res.dictId == id)

      if(!isinit) {
        this.form.videoType = id
        this.form.videoTypeName = t.categoryName
        this.form.documentType = ''
        this.form.documentTypeName = ''
        this.form.editable = ''
      }

      this.sfileTypeParam = t

      this.getCateList(id, res => {
        this.form.fileType = ''
        this.form.fileAccredit = ''
        this.form.fileNumber = ''
        this.sfileTypeList = res.data
      })
    },

    changesCate(id, type) {
      // if(type === 'subfileTypeList') return;
      const t = this.sfileTypeList.find(res => res.dictId == id)
      this.form.documentType = id
      this.form.documentTypeName = t.categoryName
      this.form.editable = ''

      this.getCateList(id, res => {
        this.subfileTypeList = res.data
        this.form.fileAccredit = ''
        this.form.fileNumber = ''
      })
    },
    getCateList(id, fn) {
      homeHttp.cmsDictList({
        parentId: id
      }).then(res => {
        fn(res)
      })
    },
    changeSelectType(type, val) {
      this[type === 'frameRate' ? 'zSelectVisible' : 'pxSelectVisible'] = false
      this.form[type] = val
    },
    goBack() {
      this.$router.go(-1)
    },
    showFun(id) {
      this.id = id
      this.form.videoId = id
      homeHttp.videoInfo(id).then(res => {
        this.info = res.data

        for(let i in this.form) {
          this.form[i] = res.data[i] || ''
        }
        this.form.priceUnit = 1

        this.form.portraitAuthorization = res.data.portraitAuthorization && res.data.portraitAuthorization.length > 0 ? res.data.portraitAuthorization.split(',') : []
        this.form.aisleAuthorization = res.data.aisleAuthorization && res.data.aisleAuthorization.length > 0 ? res.data.aisleAuthorization.split(',') : []

        this.pxParam = {
          list: [
            {k: '1920x1080', v: '1920x1080'},
            {k: '1280x720', v: '1280x720'},
            {k: '2048x1080', v: '2048x1080'},
            {k: '1096x2160', v: '1096x2160'},
          ],
              custom: false,
              width: '',
              height: ''
        }
        this.zParam = {
          list: [
            {k: '23.97', v: '23.97'},
            {k: '24', v: '24'},
            {k: '25', v: '25'},
            {k: '29.97', v: '29.97'},
            {k: '30', v: '30'},
            {k: '50', v: '50'},
            {k: '60', v: '60'},
            {k: '120', v: '120'},
          ],
            custom: false,
            v: '',
        }


        if(res.data.type == 2) {
          homeHttp.cmsCategory().then(res => {
            this.list = res.data
          })

          this.getCateList(0, res => {
            this.fileTypeList = res.data.map(res => {
              res.categoryId += ''
              return res
            })
          })

          if(this.form.documentType) {
            this.changeCate(this.form.videoType, true)
          }

          if(this.form.resolutionRatio) {
            const s = this.form.resolutionRatio.split('x')
            const a = this.pxParam.list.find(res => res.k === this.form.resolutionRatio)
            if(!a) {
              this.pxParam.width = s[0]
              this.pxParam.height = s[0]
            }
          }

          if(this.form.frameRate) {
            const s = this.form.frameRate
            const a = this.zParam.list.find(res => res.k === this.form.frameRate)
            if(!a) {
              this.zParam.v = s
            }
          }
        }

        this.pxSelectVisible = false
        this.zSelectVisible = false
        this.fileTypeList = []
        this.sfileTypeList = []
        this.subfileTypeList = []
        this.sfileTypeParam = {}

        this.dialogFlag = true;
      })
    },
  }

}
</script>

<style scoped>
.fbl-wrapper {
  position: relative;
  cursor: pointer;
}

.sel-option {
  width: 100%;
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 3px;
  text-indent: 10px;
}

.sel-option i{
  float: right;
  margin: 10px;
}

.sel-wrapper {
  position: absolute;
  width: 234px;
  top: 36px;
  left: 0px;
  background-color: #fff;
  z-index: 10000;
  cursor: pointer;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 1px 2px 5px #d3d0d0;
}

.sel-wrapper >>> .el-button--mini {
  padding: 10px 37px;
  margin-top: 10px;
}

.zl-wrapper {
  cursor: pointer;
  position: relative;
}

.sel-wrapper >>> .el-input,
.sel-wrapper >>> .el-input__inner {
  width: 95px;
}

.edit-pro >>> .el-form-item__error {
  top: 38px;
}

.edit-pro >>> .el-form-item {
  margin-bottom: 15px;
  margin-top: 10px;
}

.edit-pro >>> .el-checkbox-group {
  height: 20px;
}

.submit-btn >>> .el-button--primary {
  padding: 3% 28% !important;
}

.edit-pro >>> .el-form-item__content {
  line-height: 30px;
}

.edit-form {
  margin-top: 2%;

}

.edit-img {
  width: 290px;
}

.edit-cont {
  width: 475px;
}


.pro-bar {
  color: #a8acb2;
}

.pro-bar span {
  margin-right: 2%;
}

.tip {
  color: #606266;
  align-self: flex-start;
  padding: 0;
}

.tip:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e88342;
  margin-right: 10px;
}

.submit-btn >>> .el-form-item__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.edit-price {
  flex: 0 0 24%;
  width: 24%;
}

.edit-price >>> .el-form {
  background: rgb(246, 249, 252);
  padding: 10px;
}

.pirce-input .el-form-item__content {
  display: flex;
  align-items: center;
}

.pirce-input .el-input {
  width: 58%;
  margin-bottom: 10px;
  margin-right: 4px;
}

.pirce-input >>> .el-select {
  width: 40%;
}

.pirce-input >>> .el-input--mini .el-input__inner {
  height: 36px;
  line-height: 36px;

}

.edit-form >>> .el-form-item__label {
  padding: 0;
}

.auto-tip p {
  padding-bottom: 6px;
}

/* @media screen and (max-width: 1300px) {
  .edit-form {
    width: 90%;
  }
} */
</style>
